<!--
    author:helang
    Email:helang.love@qq.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="helang.love@qq.com">
    <title>纯CSS水平导航</title>
    <link rel="stylesheet" href="css/helang.css">
    <style type="text/css">
        .info_box{
            margin: 100px auto 0 auto;
            width: 400px;
            background-color: #ffffff;
            color: #333333;
            padding:0 0 0 30px;
        }
        .info_box>li{
            padding: 15px 0;
            font-size: 14px;
            border-top: #e5e5e5 dashed 1px;
        }
        .info_box>li:first-child{
            list-style: none;
            font-size: 16px;
            color: #FD463E;
            border-top: none;
            font-weight: bold;
        }
        .info_box>li:last-child{
            list-style: none;
            font-size: 12px;
            color: #999999;
        }
    </style>
</head>
<body>
<nav class="hl_nav">
    <ul class="nav_list">
        <li class="active">
            <a class="nav_head" href="#">网站首页</a>
            <a class="nav_body" href="#">网站首页</a>
            <a class="nav_body" href="#">网站首页</a>
            <a class="nav_body" href="#">网站首页</a>
            <a class="nav_body" href="#">网站首页</a>
            <a class="nav_body" href="#">网站首页</a>
        </li>
        <li>
            <a class="nav_head" href="#">在线下载</a>
            <a class="nav_body" href="#">在线下载</a>
            <a class="nav_body" href="#">在线下载</a>
            <a class="nav_body" href="#">在线下载</a>
            <a class="nav_body" href="#">在线下载</a>
            <a class="nav_body" href="#">在线下载</a>
        </li>
        <li>
            <a class="nav_head" href="#">成功案例</a>
            <a class="nav_body" href="#">成功案例</a>
            <a class="nav_body" href="#">成功案例</a>
            <a class="nav_body" href="#">成功案例</a>
        </li>
        <li>
            <a class="nav_head" href="#">新闻动态</a>
            <a class="nav_body" href="#">新闻动态</a>
            <a class="nav_body" href="#">新闻动态</a>
            <a class="nav_body" href="#">新闻动态</a>
        </li>
        <li>
            <a class="nav_head" href="#">专业团队</a>
            <a class="nav_body" href="#">专业团队</a>
            <a class="nav_body" href="#">专业团队</a>
        </li>
        <li>
            <a class="nav_head" href="#">招贤纳士</a>
            <a class="nav_body" href="#">招贤纳士</a>
        </li>
        <li>
            <a class="nav_head" href="#">关于我们</a>
        </li>
    </ul>
</nav>

<ul class="info_box">
    <li>说明：</li>
    <li>导航默认激活类：active<br />默认激活导航，如“网站首页”</li>
    <li>作者:helang<br />邮箱:helang.love@qq.com<br />&copy; 2018 helang (个人原创 文明转载)</li>
</ul>
</body>
</html>